<template>
    <div class="container">
        <div>
            <TreeSearch style="width: 100%" ref="refTreeSearch" @changeOrgId="changeOrgId" @handleClear="handleClear">
            </TreeSearch>

            <el-select v-model="productId" placeholder="请选择" @change="getDataList" size="small" class="el_select">
                <el-option v-for="item in product" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
            </el-select>

            <el-tree ref="vuetree" :data="dataTree" :props="defaultProps" @node-click="handleNodeClick" check-strictly
                node-key="id">
                <div class="custom-tree-node" slot-scope="{ node, data }">
                    <div style="display: flex; align-items: center; padding-left: 6px">
                        <i class="iconfont shebeixinxi" style="color: #01def9; margin-right: 5px; font-size: 1vw"></i>
                        <div :title="data.mountingPoint">
                            {{ data.orgName }} / {{ data.imei }}
                        </div>
                    </div>
                </div>
            </el-tree>
        </div>
        <div>
            <div class="row">
                <div class="div_box div_box1">
                    <div class="head">
                        <div class="title">状态</div>
                    </div>
                    <div class="content">
                        <div class="item-radio">
                            <div class="circle-box">
                                <div :class="[
                                    'circle',
                                    statusInfo.fireAlarm ? 'active-circle' : '',
                                ]">
                                    <div class="inner" v-if="statusInfo.fireAlarm"></div>
                                </div>
                                <span>火警</span>
                            </div>
                        </div>
                        <div class="item-radio">
                            <div class="circle-box">
                                <div :class="[
                                    'circle',
                                    statusInfo.isMalfunction ? 'active-circle' : '',
                                ]">
                                    <div class="inner" v-if="statusInfo.isMalfunction"></div>
                                </div>
                                <span>故障</span>
                            </div>
                        </div>
                        <div class="item-radio">
                            <div class="circle-box">
                                <div :class="[
                                    'circle',
                                    statusInfo.delayStatus === '1' ? 'active-circle' : '',
                                ]">
                                    <div class="inner" v-if="statusInfo.delayStatus === '1'"></div>
                                </div>
                                <span>延时</span>
                            </div>
                        </div>
                        <div class="item-radio">
                            <div class="circle-box">
                                <div :class="[
                                    'circle',
                                    statusInfo.sysFault === '1' ? 'active-circle' : '',
                                ]">
                                    <div class="inner" v-if="statusInfo.sysFault === '1'"></div>
                                </div>
                                <span>系统故障</span>
                            </div>
                        </div>
                        <div class="item-radio">
                            <div class="circle-box">
                                <div :class="[
                                    'circle',
                                    statusInfo.bootUp === '1' ? 'active-circle' : '',
                                ]">
                                    <div class="inner" v-if="statusInfo.bootUp === '1'"></div>
                                </div>
                                <span>启动</span>
                            </div>
                        </div>
                        <div class="item-radio">
                            <div class="circle-box">
                                <div :class="[
                                    'circle',
                                    statusInfo.mainCircuitWorked === '1' ? 'active-circle' : '',
                                ]">
                                    <div class="inner" v-if="statusInfo.mainCircuitWorked === '1'"></div>
                                </div>
                                <span>主电工作</span>
                            </div>
                        </div>
                        <div class="item-radio">
                            <div class="circle-box">
                                <div :class="[
                                    'circle',
                                    statusInfo.feedback === '1' ? 'active-circle' : '',
                                ]">
                                    <div class="inner" v-if="statusInfo.feedback === '1'"></div>
                                </div>
                                <span>反馈</span>
                            </div>
                        </div>
                        <div class="item-radio">
                            <div class="circle-box">
                                <div :class="[
                                    'circle',
                                    statusInfo.backupCircuitWorked === '1'
                                        ? 'active-circle'
                                        : '',
                                ]">
                                    <div class="inner" v-if="statusInfo.backupCircuitWorked === '1'"></div>
                                </div>
                                <span>备电工作</span>
                            </div>
                        </div>
                        <div class="item-radio">
                            <div class="circle-box">
                                <div :class="[
                                    'circle',
                                    statusInfo.isolate === '1' ? 'active-circle' : '',
                                ]">
                                    <div class="inner" v-if="statusInfo.isolate === '1'"></div>
                                </div>
                                <span>屏蔽</span>
                            </div>
                        </div>
                        <div class="item-radio">
                            <div class="circle-box">
                                <div :class="[
                                    'circle',
                                    statusInfo.supervise === '1' ? 'active-circle' : '',
                                ]">
                                    <div class="inner" v-if="statusInfo.supervise === '1'"></div>
                                </div>
                                <span>监管</span>
                            </div>
                        </div>

                        <div class="group">
                            <div class="title">火警传输：</div>
                            <div class="radio-box">
                                <div class="item-radio">
                                    <div class="circle-box">
                                        <div :class="[
                                            'circle',
                                            statusInfo.fireFeedback ? 'active-circle' : '',
                                        ]">
                                            <div class="inner" v-if="statusInfo.fireFeedback"></div>
                                        </div>
                                        <span>动作/反馈</span>
                                    </div>
                                </div>
                            </div>
                            <div class="item-radio">
                                <div class="circle-box">
                                    <div :class="[
                                        'circle',
                                        statusInfo.fireIsolate ? 'active-circle' : '',
                                    ]">
                                        <div class="inner" v-if="statusInfo.fireIsolate"></div>
                                    </div>
                                    <span>故障/屏蔽</span>
                                </div>
                            </div>
                        </div>
                        <div class="group">
                            <div class="title">气体灭火：</div>
                            <div class="radio-box">
                                <div class="item-radio">
                                    <div class="circle-box">
                                        <div :class="[
                                            'circle',
                                            statusInfo.sprayRequest ? 'active-circle' : '',
                                        ]">
                                            <div class="inner" v-if="statusInfo.sprayRequest"></div>
                                        </div>
                                        <span>喷洒请求</span>
                                    </div>
                                </div>
                            </div>
                            <div class="item-radio">
                                <div class="circle-box">
                                    <div :class="[
                                        'circle',
                                        statusInfo.gasSpraying ? 'active-circle' : '',
                                    ]">
                                        <div class="inner" v-if="statusInfo.gasSpraying"></div>
                                    </div>
                                    <span>气体喷洒</span>
                                </div>
                            </div>
                        </div>
                        <div class="group">
                            <div class="title">声光报警器：</div>
                            <div class="radio-box">
                                <div class="item-radio">
                                    <div class="circle-box">
                                        <div :class="[
                                            'circle',
                                            statusInfo.audibleVisualMute ? 'active-circle' : '',
                                        ]">
                                            <div class="inner" v-if="statusInfo.audibleVisualMute"></div>
                                        </div>
                                        <span>消音</span>
                                    </div>
                                </div>
                            </div>
                            <div class="item-radio">
                                <div class="circle-box">
                                    <div :class="[
                                        'circle',
                                        statusInfo.audibleVisualIsolate ? 'active-circle' : '',
                                    ]">
                                        <div class="inner" v-if="statusInfo.audibleVisualIsolate"></div>
                                    </div>
                                    <span>屏蔽</span>
                                </div>
                            </div>
                            <div class="item-radio">
                                <div class="circle-box">
                                    <div :class="[
                                        'circle',
                                        statusInfo.audibleVisualFault ? 'active-circle' : '',
                                    ]">
                                        <div class="inner" v-if="statusInfo.audibleVisualFault"></div>
                                    </div>
                                    <span>故障</span>
                                </div>
                            </div>
                        </div>
                        <div class="group" v-if="list1 && list1.length">
                            <div class="title">操作：</div>
                            <div class="radio-box">
                                <div class="item-radio1" v-for="item in list1" :key="item.id">
                                    <el-button class="button-new-tag" type="primary" size="mini"
                                        @click="onCommand(item)">{{ item.keyName }}</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="div_box div_box2" v-if="list2 && list2.length">
                    <div class="head">
                        <div class="title">多线盘</div>
                        <div class="dish-box">
                            <div :class="['dish', item.active ? 'dish-active' : '']" v-for="item in dishList2"
                                :key="item.id" @click="onDish(item)">
                                {{ item.panelNo }}号盘
                            </div>
                        </div>
                    </div>
                    <div class="content" style="justify-content: center">
                        <div class="item" v-for="(item, index) in list4" :key="index">
                            <div class="index">{{ index + 1 }}</div>
                            <div>
                                <div style="text-align: center">{{ item.addressMapping }}</div>
                                <div class="handle">
                                    <el-button size="mini" type="primary" @click="onCommand(item2)"
                                        v-for="(item2, index2) in item.list" :key="index2">{{ item2.keyName
                                        }}</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="div_box div_box3" v-if="list3 && list3.length">
                <div class="head">
                    <div class="title">总线盘</div>
                    <div class="dish-box">
                        <div :class="['dish', item.active ? 'dish-active' : '']" v-for="item in dishList3"
                            :key="item.id" @click="onDish3(item)">
                            {{ item.panelNo }}号盘
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div class="item" v-for="(item, index) in list5" :key="index">
                        <div class="index">{{ index + 1 }}</div>
                        <div>
                            <div style="text-align: center">{{ item.addressMapping }}</div>
                            <!-- <div class="circle-box">
              <div :class="['circle', item.status ? 'active-circle' : '']">
                <div class="inner" v-if="item.status"></div>
              </div>
              <span>{{ item.keyName }}</span>
            </div> -->
                            <div class="handle">
                                <el-button size="mini" type="primary" @click="onCommand(item2)"
                                    v-for="(item2, index2) in item.list" :key="index2">{{ item2.keyName }}</el-button>
                            </div>
                        </div>
                        <!-- <div v-else style="text-align: center; line-height: 100px">配置</div> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {
    reqSpaceManager,
    reqDeviceList,
    reqProductList,
    reqKeyCommandList,
    reqDetectorDxtend,
} from "@api/api.js";
import { reqOrgCamera } from "@api/apiDatav.js";
import screenfull from "screenfull";
import { mapState } from "vuex";
import EZUIKit from "ezuikit-js"; // ezuikit-js7.6.4
import TreeSearch from "@components/TreeSearch.vue";

export default {
    components: {
        TreeSearch,
    },
    data() {
        return {
            list: [
                {
                    id: 1,
                },
                {
                    id: 1,
                },
                {
                    id: 1,
                },
                {
                    id: 1,
                },
                {
                    id: 1,
                },
                {
                    id: 1,
                },
                {
                    id: 1,
                },
                {
                    id: 1,
                },
                {
                    id: 1,
                },
                {
                    id: 1,
                },
                {
                    id: 1,
                },
            ],
            // 左侧
            dataTree: [],
            defaultProps: {
                children: "children",
                label: "orgName",
                isLeaf: "hasChildren",
                id: "id",
            },
            orgName: "",
            product: [],
            productId: "",
            organizationId: "",
            list1: [],
            list2: [],
            list3: [],
            list4: [],
            list5: [],
            dishList2: [],
            dishList3: [],
            statusInfo: {
                fireAlarm: "", //火警状态：1-火警 0-未报警
                isMalfunction: "", //故障状态 0正常 1故障
                delayStatus: "", //延时状态：1-延时 0-延时结束
                sysFault: "", //系统故障：1-故障 0-已恢复
                bootUp: "", //启动状态：1-已启动 0-未启动
                mainCircuitWorked: "", //主电工作：1-工作 0-未工作
                feedback: "", //反馈状态：1-已反馈 0-未反馈
                backupCircuitWorked: "", //备电工作：1-工作 0-未工作
                isolate: "", //隔离（屏蔽）状态：1-隔离（屏蔽） 0-未隔离（屏蔽）
                supervise: "", //监管状态：1-监管 0-未监管

                fireFeedback: "", //火警传输 (动作)反馈状态: 1-口反馈 0-未反馈
                fireIsolate: "", //火警传输 隔离(屏蔽)状态:1-隔离(屏蔽)0-未隔离

                sprayRequest: "", //喷洒状态：1-喷洒允许 0-喷洒禁止
                gasSpraying: "", //喷洒状态：1-喷洒中 0-未喷洒

                audibleVisualMute: "", //声光报警 消音状态:1-已消音 0-未消音
                audibleVisualIsolate: "", //声光报警 隔离(屏蔽)状态:1-隔离(屏蔽)0-未隔离
                audibleVisualFault: "", //声光报警 故障:1-故障 0-已恢复

                // sprayRequest: "", //喷洒状态：1-喷洒允许 0-喷洒禁止
                // resetStatus: "", //复位状态：1-复位 0-未复位
                // manualOperate: "", //手动状态（多线制锁）：1-运行 0-禁止
                // mute: "", //消音状态：1-已消音 0-未消音
                // autoOperate: "", //自动状态：1-允许 0-禁止 2-全部自动 3-部分自动
                // isAlarm: "", //告警状态 0正常 1告警
            },
            nodeData: {},
        };
    },
    computed: {
        ...mapState(["user", "spacesManage"]),
    },
    watch: {},
    methods: {
        closeAddDialog() {
            this.list1 = []
            this.list2 = []
            this.list3 = []
            this.statusInfo = {
                fireAlarm: "", //火警状态：1-火警 0-未报警
                isMalfunction: "", //故障状态 0正常 1故障
                delayStatus: "", //延时状态：1-延时 0-延时结束
                sysFault: "", //系统故障：1-故障 0-已恢复
                bootUp: "", //启动状态：1-已启动 0-未启动
                mainCircuitWorked: "", //主电工作：1-工作 0-未工作
                feedback: "", //反馈状态：1-已反馈 0-未反馈
                backupCircuitWorked: "", //备电工作：1-工作 0-未工作
                isolate: "", //隔离（屏蔽）状态：1-隔离（屏蔽） 0-未隔离（屏蔽）
                supervise: "", //监管状态：1-监管 0-未监管

                fireFeedback: "", //火警传输 (动作)反馈状态: 1-口反馈 0-未反馈
                fireIsolate: "", //火警传输 隔离(屏蔽)状态:1-隔离(屏蔽)0-未隔离

                sprayRequest: "", //喷洒状态：1-喷洒允许 0-喷洒禁止
                gasSpraying: "", //喷洒状态：1-喷洒中 0-未喷洒

                audibleVisualMute: "", //声光报警 消音状态:1-已消音 0-未消音
                audibleVisualIsolate: "", //声光报警 隔离(屏蔽)状态:1-隔离(屏蔽)0-未隔离
                audibleVisualFault: "", //声光报警 故障:1-故障 0-已恢复
            }
        },
        // 下发指令
        async onCommand(item) {
            this.$emit('getFinish', item, this.nodeData.imei)
            // return
            // const result = await this.$confirm(
            //     `此操作将下发 ${item.keyName} 指令, 是否继续?`,
            //     "提示",
            //     {
            //         confirmButtonText: "确定",
            //         cancelButtonText: "取消",
            //         type: "warning",
            //     }
            // ).catch(() => { });
            // if (result !== "confirm") return;
            // let res = await reqKeyCommandSend({
            //     deviceCode: this.nodeData.imei,
            //     id: item.id,
            // });
            // if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            // this.$modal.notifySuccess("指令下发成功");
            // setTimeout(() => {
            //     this.getDetectorDxtend();
            // }, 5000);
        },
        changeOrgId(instanceId) {
            this.organizationId = instanceId.id;
            if (this.productId == '') return
            this.getDataList();
        },
        handleClear() {
            this.organizationId = "";
            this.getDataList();
        },
        async ProductList() {
            let res = await reqProductList();
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            this.product = []
            res.data.rows.forEach((item) => {
                if (item.deviceType == "FireAlarmController" || item.deviceType == "UserTransferDevice") {
                    this.product.push(item)
                }
            });
            this.productId = this.product[0].id
            // this.getDataList();
        },
        // 获取设备列表
        async getDataList() {
            const res = await reqDeviceList(1, 100, {
                userId: this.user.userId,
                roleName: this.user.roleName,
                tenantId: this.user.tenantId,
                productId: this.productId,
                buildingId: "",
                floorId: "",
                isAlarm: "",
                online: "",
                orgId:
                    this.organizationId == ""
                        ? this.spacesManage.organizationInfo.orgId
                        : this.organizationId, //组织机构id
            });
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            // console.log(res);
            this.dataTree = res.data.rows;
            // if(this.dataTree.length>0){
            //     console.log(this.dataTree,'this.dataTree');
            //     this.nodeData = this.dataTree[0];
            //     this.getKeyCommandList(this.dataTree[0].imei);
            //     this.getDetectorDxtend();
            // }
        },

        async loadNode(node, resolve) {
            //   console.log(node);
            if (node.level === 1) {
                // 建筑物
                let data = [];
                let params = {
                    userId: this.user.userId,
                    roleName: this.user.roleName,
                    metaCode: 1,
                    orgId: node.data.orgId, //组织机构id
                    isStatistics: 0,
                };
                let res = await reqSpaceManager(1, 999, params);
                res.data.rows.forEach((item) => {
                    data.push({
                        orgName: item.name,
                        id: item.id,
                        orgId: node.data.orgId, //组织机构id
                        parentId: item.id, //建筑物id
                        hasChildren: false, //无子级
                    });
                });
                return resolve(data);
            } else if (node.level === 2) {
                // 楼层
                let data = [];
                let params = {
                    userId: this.user.userId,
                    roleName: this.user.roleName,
                    metaCode: 2,
                    parentId: node.data.id, //建筑物id
                    orgId: node.data.orgId, //组织机构id
                    isStatistics: 0,
                };
                let res = await reqSpaceManager(1, 999, params);
                res.data.rows.forEach((item) => {
                    data.push({
                        orgName: item.name,
                        orgId: node.data.orgId, //组织机构id
                        parentId: node.data.id, //建筑物id
                        floorId: item.id, //楼层id
                        hasChildren: false, //无子级
                    });
                });
                return resolve(data);
            } else if (node.level === 3) {
                // 设备
                let data = [];
                let params = {
                    userId: this.user.userId,
                    roleName: this.user.roleName,
                    tenantId: this.user.tenantId,
                    buildingId: node.data.parentId, //建筑物id
                    orgId: node.data.orgId, //组织机构id
                    floorId: node.data.floorId, //楼层id
                    // classMark: "V380",
                    productId: "1503927023020938595", //摄像机产品id
                };
                let res = await reqDeviceList(1, 999, params);
                // console.log(res);
                res.data.rows.forEach((item) => {
                    // if(item.protocol=='4'){
                    //     // 萤石云设备 设备id为空 从imei取值
                    //     item.deviceId=item.imei.slice(-4)//截取后四位
                    // }
                    data.push({
                        orgName: item.imei,
                        id: item.id,
                        deviceId: item.deviceId,
                        spaceName: item.spaceName,
                        mountingPoint: item.mountingPoint,
                        classMark: item.classMark,
                        protocol: item.protocol,
                        imei: item.imei,
                        sn: item.sn,
                        hasChildren: true, //无子级
                    });
                });
                return resolve(data);
            } else {
                return resolve([]);
            }
        },
        // 点击一条
        async handleNodeClick(data, checked) {
            // console.log(data.imei, 'data');
            this.nodeData = data;
            this.getKeyCommandList(data.imei);
            this.getDetectorDxtend();
            // console.log(this.list);
        },
        // 状态信息
        async getDetectorDxtend() {
            let res = await reqDetectorDxtend({
                deviceCode: this.nodeData.imei,
            });
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            // console.log("res状态信息", res);
            this.statusInfo = res.data.detail;
        },
        // 获取指令列表
        async getKeyCommandList(imei) {
            let res = await reqKeyCommandList({
                deviceCode: imei,
                 screen:'1',
            });
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            // console.log("res.data.list", res.data.list);
            let list = res.data.list;
            let list1 = [];
            let list2 = [];
            let list3 = [];
            list.forEach((item) => {
                switch (item.layoutType) {
                    case "1":
                        // 基本面板
                        // console.log("item1", item);
                        list1.push(item);
                        break;
                    case "2":
                        // 多线面板
                        // console.log("item2", item);
                        list2.push(item);
                        break;
                    case "3":
                        // 总线面板
                        // console.log("item3", item);
                        list3.push(item);
                        break;
                }
            });
            // 处理相同数据
            this.list2 = list2.reduce((acc, item) => {
                const existingItem = acc.find(
                    (i) => i.groupNo === item.groupNo
                );
                if (existingItem) {
                    existingItem.list.push({
                        id: item.id,
                        keyName: item.keyName,
                        deviceCode: item.deviceCode,
                    });
                } else {
                    acc.push({
                        addressMapping: item.addressMapping,
                        status: item.status,
                        groupNo: item.groupNo,
                        panelNo: item.panelNo,
                        list: [
                            {
                                id: item.id,
                                keyName: item.keyName,
                                deviceCode: item.deviceCode,
                            },
                        ],
                    });
                }
                return acc;
            }, []);
            this.list2 = this.list2.sort((a, b) => a.groupNo - b.groupNo); //排序
            // 处理相同数据
            this.list3 = list3.reduce((acc, item) => {
                const existingItem = acc.find(
                    (i) => i.groupNo === item.groupNo
                );
                if (existingItem) {
                    existingItem.list.push({
                        id: item.id,
                        keyName: item.keyName,
                        deviceCode: item.deviceCode,
                    });
                } else {
                    acc.push({
                        addressMapping: item.addressMapping,
                        status: item.status,
                        groupNo: item.groupNo,
                        panelNo: item.panelNo,
                        list: [
                            {
                                id: item.id,
                                keyName: item.keyName,
                                deviceCode: item.deviceCode,
                            },
                        ],
                    });
                }
                return acc;
            }, []);
            this.list3 = this.list3.sort((a, b) => a.groupNo - b.groupNo); //排序
            // while (this.list3.length && this.list3.length < 30) {
            //   const emptyElement = {};
            //   this.list3.push(emptyElement);
            // }
            // 多线盘 盘号
            this.dishList2 = this.list2.reduce((acc, curr) => {
                const alreadyExists = acc.some(item => item.panelNo == curr.panelNo);
                if (!alreadyExists) {
                    acc.push({
                        ...curr,
                        active: false
                    });
                }
                return acc;
            }, []);
            // console.log(this.dishList2, 'dishList2', this.list2);
            if (this.dishList2.length > 0) {
                this.onDish(this.dishList2[0])
            }

            // 总线盘 盘号
            this.dishList3 = this.list3.reduce((acc, curr) => {
                const alreadyExists = acc.some(item => item.panelNo == curr.panelNo);
                if (!alreadyExists) {
                    acc.push({
                        ...curr,
                        active: false
                    });
                }
                return acc;
            }, []);
            if (this.dishList3.length > 0) {
                this.onDish3(this.dishList3[0])
            }

            this.list1 = list1;
        },
        // 点击盘号
        onDish(info) {
            this.dishList2.forEach((item) => {
                if (item.panelNo === info.panelNo) {
                    item.active = true;
                } else {
                    item.active = false;
                }
            });
            this.list4 = this.list2.filter(item => item.panelNo === info.panelNo)//过滤线盘
        },
        // 点击盘号
        onDish3(info) {
            this.dishList3.forEach((item) => {
                if (item.panelNo === info.panelNo) {
                    item.active = true;
                } else {
                    item.active = false;
                }
            });
            this.list5 = this.list3.filter(item => item.panelNo === info.panelNo)//过滤线盘
        },
    },
    async created() {
    },
    mounted() { },
};
</script>

<style lang='less' scoped>
.container {
    height: 100%;
    display: flex;
    font-size: 13px;

    >div:first-of-type {
        width: 22%;
        padding-right: 15px;
        box-sizing: border-box;
        overflow: hidden;
        /* 隐藏超出部分 */
        text-overflow: ellipsis;
        /* 超出部分显示省略号 */
        white-space: nowrap;
        /* 防止文字换行 */
    }

    >div:last-of-type {
        width: 78%;
        display: flex;
        flex-direction: column;
    }
}

::v-deep .el-tree {
    margin-top: 10px;
    // height: 100%;
    height: calc(100% - 85px);
    overflow-y: auto !important;
    opacity: 1 !important;
    padding-bottom: 3px;
    padding-right: 5px;
    box-sizing: border-box;
    background: transparent;
    color: #fff;
}

::v-deep .el-tree-node__content {
    border-bottom: 1px solid transparent;
    padding-top: 13px !important;
    padding-bottom: 13px !important;
    border-image: linear-gradient(225deg,
            rgba(0, 255, 255, 0),
            #1acafa,
            rgba(0, 255, 255, 0)) 1 1;
}

// el-tree背景色
::v-deep .el-tree-node__content:hover {
    background-color: transparent !important;
}

::v-deep .el-tree-node.is-current>.el-tree-node__content {
    background-color: #4b5f7e66 !important;
}

::v-deep .el-tree-node:focus>.el-tree-node__content {
    background-color: #4b5f7e66 !important;
}

.head {
    color: #4eaef2 !important;
    display: flex;
    align-items: center;
    margin: 6px 6px 6px 15px;

    .title {
        // font-size: 16px;
        // color: #7367f0;
        // font-weight: 600;
        margin-right: 15px;
        width: 64px;
        font-size: 20px;
        font-weight: 600;
    }

    .dish-box {
        display: flex;
        border-radius: 5px;
        flex: 1;
        overflow-x: auto;

        .dish {
            width: 60px;
            min-width: 60px;
            cursor: pointer;
            font-weight: 200;
            color: #fff;
            border: 1px solid #44485e;
            padding: 4px 1px;
            display: flex;
            align-items: center;
            justify-content: center;

            &:hover {
                opacity: 0.8;
            }

            &:first-child {
                border-radius: 5px 0 0 5px;
            }

            &:last-child {
                border-radius: 0 5px 5px 0;
            }
        }

        .dish-active {
            color: #01DEF9;
            // background: #01DEF9;
        }
    }
}

/* 定义滚动条样式 */
::v-deep .dish-box::-webkit-scrollbar {
  display: block; //显示滚动条
  width: 0px; //定义滚动条宽度
  height: 6px; //定义滚动条高度
  border-radius: 10px; //定义滚动条圆角
  margin-bottom: 10px;
  bottom: 100px;
}

/*定义滚动条轨道 内阴影+圆角*/
::v-deep .dish-box::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5); //定义轨道阴影
  border-radius: 10px; //定义轨道圆角
  background-color: transparent; //定义轨道颜色
}

/*定义滑块 内阴影+圆角*/
::v-deep .dish-box::-webkit-scrollbar-thumb {
  border-radius: 10px; //定义滑块圆角
  box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5); //定义滑块阴影
  background-color: #07ADDF; //定义滑块颜色
}

::v-deep .el-dialog__body {
    background: none !important;
    min-height: 76vh;
    overflow-y: auto;
    padding: 20px !important;
    color: #f1f1f1;
}

::v-deep .el-dialog {
    width: 90%;
    overflow-y: auto;
    min-height: 76vh;
}

::v-deep .el-dialog__header {
    background: #09143f !important;
    border-bottom: 1px solid #06b1e76e;
    padding: 18px !important;
}

::v-deep .el-dialog__body {
    background: #09143f !important;
}

.el_input {
    width: 100%;
    border-radius: 5px !important;
    border: 1px solid #01def9;
    margin-bottom: 1.5vh;

    ::v-deep .el-input__inner {
        background: #003c9b !important;
        border: none !important;
        border-radius: 5px !important;
    }
}

::v-deep .el-tree-node__expand-icon.is-leaf {
    display: none;
}

.button_primary {
    background: #32bee0 !important;
    border-color: #32bee0 !important;
}

/* 隐藏所有节点的小箭头 */
::v-deep .el-tree-node__expand-icon {
    display: none;
}

::v-deep .vue-treeselect__control {
    background: #001f5b;
}

.content {
    display: flex;
    flex-wrap: wrap;
    color: #d1d1d1;
    padding: 0 10px 10px 10px;

    .item-radio {
        position: relative;
        padding: 10px 15px;
        margin: 5px 5px;
        text-align: center;
    }

    .item {
        position: relative;
        width: 170px;
        height: 120px;
        margin: 5px 5px;
        border: 1px solid #ccc;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #d1d1d1;
        border: 1px solid #58c0f9 !important;
        background: #11295e !important;

        .index {
            position: absolute;
            top: 5px;
            left: 5px;
            color: #999;
        }

        .handle {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }
    }

    .circle-box {
        margin: 10px 0;
        display: flex;
        align-items: center;
        // justify-content: center;

        .circle {
            width: 12px;
            height: 12px;
            border: 1px solid #999;
            background: #fff;
            border-radius: 50%;
            margin-right: 8px;
            display: flex;
            align-items: center;
            justify-content: center;

            .inner {
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background: #fff;
            }
        }

        .active-circle {
            // background: #7367f0;
            // border-color: #7367f0;
            animation: blinkAnimation 1s infinite;
        }
    }
}
@keyframes blinkAnimation {
  0%,
  100% {
    background-color: #f56c6c; /* 闪烁时的背景色 */
    border-color: #f56c6c; /* 可选：闪烁时的边框色 */
  }
  50% {
    background-color: transparent; /* 透明表示“熄灭”状态 */
    border-color: transparent; /* 如果需要，也可以让边框在闪烁时消失 */
  }
}

::v-deep .el-button.el-button--default {
    background: #000f4a;
    border: 1px solid #000f4a;
    color: #d1d1d1;
}

::v-deep .el-button.el-button--primary {
    background: #000f4a !important;
    border: 1px solid #01def9 !important;
    color: #d1d1d1;
}

.div_box {
    border: 2px solid #00e8fc;
    border-radius: 8px;
}

.div_box3 {
    max-height: 45%;
    overflow: auto;
    margin-top: 20px;
}

.row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    max-height: 55%;
    overflow: auto;

    .item {
        //   width: 47% !important;
        //   min-width: 150px;
        width: 170px;
        height: 120px;
    }

    .div_box {
        min-height: 200px;

        .group {
            width: 100%;
            padding: 12px 10px 12px 0;
            // background: @primaryBgcolor10;
            border-radius: 5px;
            display: flex;
            align-items: center;

            // flex-wrap: wrap;
            .title {
                min-width: 80px;
                padding: 0 10px 0 20px;
                font-size: 15px;
                font-weight: 600;
            }

            .radio-box {
                display: flex;
                flex-wrap: wrap;

                .item-radio {
                    width: 100px;
                }

                .item-radio1 {
                    margin: 0 10px;
                }
            }

            .button-new-tag {
                margin: 5px 0;
            }
        }

        .item-radio {
            position: relative;
            width: 100px;
            padding: 0 15px !important;
            margin: 0 0 !important;
            text-align: left;
        }
    }

    .div_box1 {
        flex: 3;
        height: 100%;
        overflow-y: auto;
        box-sizing: border-box;
    }

    .div_box2 {
        flex: 2;
        height: 100%;
        overflow-y: auto;
        box-sizing: border-box;
        margin-left: 20px;
    }
}

.el_select {
    width: 100%;
}

::v-deep .el-input__inner {
    background: #001F5B;
}

::v-deep .el-input--small .el-input__inner {
    height: 34px;
    line-height: 34px;
}

::v-deep .el-input__inner:hover {
    border: 1px solid #3b4253;
    /* 鼠标移入时边框颜色变为蓝色 */
}
</style>